<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <text class="logo-text">消防</text>
      <text class="logo-text2">企业管</text>
      <text class="logo-text3">理</text>
    </view>

  </view>
</template>

<style lang="scss">
/* 自定义导航条 */
.navbar {
  // SAIL-0004 scss引入本地图片
  // background-image: url(@/static/images/navigator_bg.png);
    // background-image: url(@/static/images/navigator_bg.png);
  background: linear-gradient(to bottom, #5289ff 0%,#7aabff 30%, #a3c7ff 50%, #f0f3f8 100%);
  // linear-gradient(to bottom, #007BFF, #f0f3f8);
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .logo {
    padding-left: 20rpx;
    .logo-text {
      flex: 1;
      background: linear-gradient(90deg, #0056e3, #333); /* 渐变背景 */
            -webkit-background-clip: text; /* 将背景裁剪到文字 */
          -webkit-text-fill-color: transparent; /* 文字颜色透明，显示背景渐变 */
          font-size: 22px;
      margin: 0 0 0 0;
      font-family: "阿里妈妈数黑体 Bold";
      font-weight: 700;
    }
    .logo-text2 {
      flex: 1;
              color: #333; /* 渐变背景 */
          font-size: 23px;
      margin: 0 0 0 0;
      font-family: "阿里妈妈数黑体 Bold";
      font-weight: 700;
    }
    .logo-text3 {
      flex: 1;
              background: linear-gradient(90deg, #333,#ff9800); /* 渐变背景 */
            -webkit-background-clip: text; /* 将背景裁剪到文字 */
          -webkit-text-fill-color: transparent; /* 文字颜色透明，显示背景渐变 */
          font-size: 23px;
      margin: 0 0 0 0;
      font-family: "阿里妈妈数黑体 Bold";
      font-weight: 700;
    }
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search {
    &::before {
      margin-right: 10rpx;
    }
  }
  .icon-scan {
    font-size: 30rpx;
    padding: 15rpx;
  }
}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈数黑体 Bold";font-weight: 700;src: url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/y1tmUV8ZoHam.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/uZ2UDI4XpdoS.woff") format("woff");
  font-display: swap;
}
</style>
